<template>
  <div class="order" v-if="!getIsPhone">
   
  </div>
  <div class="order" v-else>
    <header-template-phone>
      <template v-slot:center>
        订单
      </template>
      <template v-slot:right>
        <div @click="handleClick">
          投注记录
        </div>
      </template>
    </header-template-phone>
    <div class="order-inner">
      <notice-hint class="notice-hint">
        当前页仅显示<span class="highlight">未结算</span>订单
      </notice-hint>
      <div class="general-info">
        <bill-board>
          <div class="billboard-content">
            <div class="item border-right">
              <div class="title">待开奖</div>
              <div class="quantity statistics">
              <span>{{unsettleOrder.length}}</span>
              <span class="extra">注</span>
              </div>
            </div>
            <div class="item border-right">
              <div class="title">购买金额</div>
              <div class="amount statistics">
              <span>-{{totalAmount}}</span><span class="extra">.00</span>
              </div>
            </div>
            <div class="item">
              <div class="title">最高奖金</div>
              <div class="bonus statistics">
                <span>+{{totalBonus}}</span><span class="extra">.00</span>
              </div>
            </div>
          </div>
        </bill-board>
      </div>
      <div class='order-content'>
        <order-specification 
          @click="cancelOrder"
          class="order-item"
          :item="item"
          v-for="item in unsettleOrder" 
          :key="item.orderId"
          > 
          <div class="items">
            <div class="item">
              <span class="item-title">时间:</span><span>{{item.orderTime | formater}}</span>
            </div>
            <div class="item">
              <span class="item-title">单号:</span><span>{{item.orderId}}</span>
            </div>
            <div class="item">
              <span class="item-title">玩法:</span><span>{{item.lotteryType}}</span>
            </div>
            <div class="item">
              <span class="item-title">购买:</span>
              <span class="item-amount">{{item.amount}}</span>
              <span class="item-bonus">(最高奖金:<span>{{item.bonus}}</span>)</span>
            </div>
            <div class="item">
              <span class="item-title">返点:</span><span>{{item.refundRate}}</span>
            </div>
            <div class="item">
              <span class="item-title">内容:</span><span><span class="at">@</span>{{item.numbers}}</span>
            </div>
          </div>
        </order-specification>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import NoticeHint from '@/components/base/notice-hint/notice-hint'
import BillBoard from '@/components/base/bill-board/bill-board'
import OrderSpecification from '@/components/base/order-specification/order-specification'
// import OrderList from './components/orderList'

import { findIndexById } from '@/assets/js/util'
import { mapGetters } from 'vuex';
export default {
  components: {
    HeaderTemplatePhone,
    NoticeHint,
    BillBoard,
    OrderSpecification,
    // OrderList
  },
  data() {
    return {
      unsettleOrder: [
      {
        dateNo: '819047',
        drawTime: new Date().getTime() +  3600 * 1000,
        orderTime: new Date().getTime() -  3600 * 1000,
        orderId: 'DD12967FT1',
        lotteryType: '香港六合彩-特码色波',
        amount: 100,
        bonus: 280,
        refundRate: '2.5%',
        numbers: '红波'
      },
      {
        dateNo: '819047',
        drawTime: new Date().getTime() +  3600 * 1000,
        orderTime: new Date().getTime() - 24 * 3600 * 1000,
        orderId: 'DD12967FT2',
        lotteryType: '重庆时时彩-五星直选复式',
        amount: 700,
        bonus: 2000,
        refundRate: '2.5%',
        numbers: '红波,绿波,蓝波'
      },
      {
        dateNo: '819047',
        drawTime: new Date().getTime() +  3600 * 1000,
        orderTime: new Date().getTime() - 24 * 3600 * 1000,
        orderId: 'DD12967FT3',
        lotteryType: '北京赛车-特码',
        amount: 1000,
        bonus: 2800,
        refundRate: '2.5%',
        numbers: '12357,27891,33334,77778,999876'
      },
    ]
   }
  },
  methods:{
    handleClick() {
      this.$router.push({path: '/orders/records/0'})
    },
    cancelOrder(id) {
     this.unsettleOrder.some((item, index) => {
       if(item.orderId == id) {
         this.unsettleOrder.splice(index, 1)
         return true
       }
     })
    },
    getSum(key) {
      let ret = 0
      this.unsettleOrder.forEach(order => {
        ret += order[key]
      })
      return ret
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    totalAmount() {
      return this.getSum('amount')
    },
    totalBonus() {
     return this.getSum('bonus')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (max-width 750px)
    .order 
      .center-context 
        font-size 15px
        color #fff
      .order-inner
        box-sizing border-box 
        padding-top 48px
        padding-bottom 48px
        .notice-hint 
          padding 0 10px 
          box-sizing border-box
          background $color-nav-bg
          color $color-text-yellow
          .highlight 
            color $color-theme-red
        .notice-hint >>> .content 
          height 24px 
          line-height 24px 
          padding 0
        .general-info 
          width 100%
          box-shadow inset 0 -5px 5px #dcd9d9
          padding 10px 10px 8px 10px
          box-sizing border-box
          position relative
          .billboard-content 
            width 100% 
            display flex
            height 70px
            background #fff
            .item 
              width 33.33% 
              box-sizing border-box 
              display flex 
              flex-direction column 
              justify-content center
              .title 
                margin-bottom 10px
                color $color-sub-grey
              .statistics
                display inline-block
                span 
                  font-size 15px
                .extra 
                  display inline-block
                  font-size 10px
                &.amount 
                  color $color-primary-green
                &.bonus
                  color $color-theme-red
        .order-content 
          box-sizing border-box 
          padding 0 10px
          padding-top 10px
          .order-item 
            margin-bottom 10px 
            box-shadow 0 2px 3px #ddd
            .items 
              box-sizing border-box 
              padding 0 10px
              background-color #fff
              .item 
                line-height 2
                .item-title 
                  margin-right 10px
                .item-amount 
                  color $color-primary-green 
                .item-bonus 
                  color $color-theme-red
                .at 
                  color $color-theme-red
                
</style>